<template>
  <div class="topology-chart-wrap">
    <vue2-org-tree
      :data="treeData"
      :horizontal="true"
      label-class-name="common-tree-class"
    ></vue2-org-tree>
  </div>
</template>

<script>
export default {
  name: "ProcessTopology",
  props: {
    option: {
      type: Object,
      default: () => ({
        treeData: [],
        tableField: [],
        config: {
          pagination: {
            show: false,
          },
          border: false,
        },
      }),
    },
    config: {
      type: Object,
      default: () => ({
        isPaginationDisabled: false,
      }),
    },
  },
  data() {
    return {};
  },
  computed: {
    treeData: function () {
      let treeData = this.option?.treeData || [];
      if (treeData && treeData instanceof Array) {
        console.log(treeData);
        return treeData[0] ? treeData[0] : {};
      } else {
        return {};
      }
    },
  },
};
</script>

<style scoped lang="scss">
.topology-chart-wrap {
  width: 100%;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-content: center;
}
</style>

